<!--
 * @Author: wangming
 * @Date: 2021-04-14 15:04:41
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-24 18:20:00
 * @Description: file content
-->
<route>
{
  "alias": "/"
}
</route>
<template>
  <div class="app-login" v-loading="showLoading">
    <img class="app-login__image" src="@/assets/image/login/login.png" alt />
    <div class="app-login__content">
      <div class="app-login__form">
        <div class="app-login__title">
          <div class="app-login__img">
            <el-image v-if="APP_INFO.icon" style="height: 120px; width: 120px"
              :src="APP_INFO.icon.accessUrl || APP_INFO.icon" fit="cover"></el-image>
            <img src="../../../public/icon.svg" width="120" v-else />
          </div>
          <div class="app-login__text">
            <h1>您好</h1>
            <h1>欢迎使用{{ APP_INFO.appName || $t("sys.Harmon") }}</h1>
          </div>
        </div>
        <el-form :model="ruleForm" status-icon ref="ruleForm" :rules="rules" size="medium">
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" :placeholder="$t('sys.placeholder_username')"></el-input>
            <div class="app-login__form-item--prefix">
              <IconPark type="classroom" size="24" fill="#2E46B0"></IconPark>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password :placeholder="$t('sys.enter_password')" type="password" v-model="ruleForm.password"
              autocomplete="off" @keyup.enter.native="submitForm"></el-input>
            <div class="app-login__form-item--prefix">
              <IconPark type="unlock" size="24" fill="#2E46B0"></IconPark>
            </div>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm" style="width: 100%" size="medium" :loading="loading">{{
            $t("sys.log_in")
        }}</el-button>
      </div>
    </div>
    <!-- <div class="app-login__logo">
      <el-image
        v-if="APP_INFO.icon"
        style="height: 24px; width: 24px"
        :src="APP_INFO.icon"
        fit="cover"
      ></el-image>
      <img src="../../../public/icon.svg" width="24" v-else />
      <span class="app-login__logo--text">
        {{ APP_INFO.appName || $t("sys.Harmon") }}({{
          $t("sys.application_end")
        }})
      </span>
    </div> -->
  </div>
</template>

<script>
import i18n from "../../i18n"
import { postHmuserLogin } from "@/apis/paas/HmUserController.js"
import md5 from "md5"
import { getAuthMenus } from "@/router/permission"
import { Accesstoken } from "@/utils/auth"
import { mapGetters, mapActions } from "vuex"
import { MOS_ENABLED, TOKEN } from "@/utils/const"
import stores from "store2"
import store from "@/store"
import { IconPark } from "@icon-park/vue/es/all"
import { getActivitedStatus } from "@/customApi/license.js"
import { PASSWORD_COMPLEX_REG } from "@/utils/reg"
export default {
  layout: "formlayout",
  components: {
    IconPark,
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        password: "",
        username: "",
      },
      showLoading: true,
      rules: {
        username: [
          {
            required: true,
            message: i18n.t("sys.placeholder_username"),
            trigger: "change",
          },
        ],
        password: [
          {
            required: true,
            message: i18n.t("sys.enter_password"),
            trigger: "change",
          },
        ],
      },
    }
  },
  computed: {
    ...mapGetters(["APP_INFO", "MOS_ENABLED"]),
    pwdCheck() {
      return this.APP_INFO.pwdCheck || false
    },
  },

  created() {
    if (this.MOS_ENABLED) {
      this.loginWithmosEnabled()
    } else {
      this.showLoading = false
    }
    // 清空菜单缓存
    this.$store.commit("CLEAR_VISITED_VIEW")
    this.$store.commit("CLEAR_ROUTES")
  },

  methods: {
    ...mapActions(["generateMenus"]),
    async loginWithmosEnabled() {
      this.showLoading = true
      try {
        Accesstoken.setAccessToken(stores.get(TOKEN))
        const { appMenus } = await getAuthMenus()
        const { name, meta } = appMenus[0].children[0]
        const accessRoutes = await this.generateMenus(appMenus)
        this.$router.addRoutes(accessRoutes)
        await this.$router.push({ name, query: { pageId: meta.pageId } })
      } finally {
        this.showLoading = false
      }
    },

    async submitForm() {
      await this.$refs.ruleForm.validate()
      this.$store.commit("CLEAR_ROUTES")
      try {
        this.loading = true
        const { username, password } = this.ruleForm
        const headers = {
          "Login-Type": "Account_Password",
          "Client-Type": "PC",
        }
        const token = await postHmuserLogin(
          {
            username,
            password: md5(password),
          },
          { headers, isLogin: true },
        )
        Accesstoken.setAccessToken(token)
        await store.dispatch("loadUserInfo")
        const { appMenus } = await getAuthMenus()
        const { name, meta } = appMenus[0].children[0]
        const accessRoutes = await this.generateMenus(appMenus)
        this.$router.addRoutes(accessRoutes)
        await this.$router.push({ name, query: { pageId: meta.pageId } })
        this.$message.success(this.$t("sys.log_in_success"))
        if (this.pwdCheck && !password.match(PASSWORD_COMPLEX_REG)) {
          this.$confirm(this.$t("sys.changePwd"), {
            confirmButtonText: this.$t("sys.confirm"),
            cancelButtonText: this.$t("sys.not_cahnge_now"),
            type: "warning",
          }).then(() => {
            this.$router.push({
              name: "app-usercenter",
              query: { tabvalue: "security" },
            })
          })
        }
      } catch (error) { }
      this.loading = false
    },
  },
}
</script>

<style lang="scss" scoped>
$themeColor: #2e46b0;

.app-login {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;

  &__image {
    height: 100vh;
    width: 60vh;
  }

  &__content {
    flex: 1;
  }

  &__title {
    display: flex;
  }

  &__img {
    font-size: 0;
    margin-right: 20px;
    flex: none;
  }

  &__form {
    width: 520px;
    margin: 20vh auto 0;

    h1 {
      font-size: 48px;
      line-height: 1;
      margin: 0;
      // font-weight: normal;

      &:nth-child(2) {
        margin-top: 24px;
        white-space: nowrap;
      }
    }

    &-item--prefix {
      position: absolute;
      top: 11px;
      left: 0;
      border-right: 2px solid $themeColor;
      height: 22px;
      width: 60px;
      font-size: 0;
      line-height: 0;
      box-sizing: border-box;
      padding-left: 12px;
      display: flex;
      align-items: center;
    }

    .el-input ::v-deep .el-input__inner {
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom-width: 2px;
      border-radius: 0;
      padding-left: 90px;
      height: 48px;
      line-height: 48px;
      font-size: 18px;
    }

    .el-form-item:not(.is-error) .el-input ::v-deep .el-input__inner:focus {
      border-color: $themeColor;
    }

    .el-form {
      margin-top: 75px;
    }

    .el-form-item {
      position: relative;
    }
  }

  &__logo {
    position: absolute;
    display: flex;
    align-items: center;
    line-height: 1;
    right: 80px;
    top: 48px;
    font-size: 18px;
    font-weight: bold;

    &--text {
      margin-left: 10px;
    }
  }

  .el-button {
    height: 56px !important;
    background: $themeColor;
    margin-top: 40px;
    font-size: 18px;
    font-weight: bold;
    border-color: $themeColor;
    border-radius: 5px;

    ::v-deep span {
      letter-spacing: 1em;
    }
  }
}
</style>
